<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- JavaScript:核心语法+DOM（针对页面操作）+BOM（针对浏览器）
		 学习主题：针对页面操作比较低  理解：JQ框架改变页面内容效果
		 js基础：就可以直接学习，了解函数使用
		 基础函数---事件源之后出现，事件源语法糖中
		 html()    作用：增加一个元素，覆盖原有html
		 val()     作用：针对input元素，修改文本框内容
		 text()    作用：生成文本内容
		 -->
		 <script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- 鼠标点击按钮,然后，改变下面产生一行文本-->
		<button>按钮</button>
		<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente ab in amet ullam nostrum hic ut veniam eius quam. Numquam quod dolore rem laborum mollitia itaque sequi provident laudantium libero.</p >
		<div style="width: 200px; height: 200px; background: #000;"></div>
		<h3>lorem</h3>
		<input type="button" value="按钮2"/>
		<input type="text" value="输入框可直接写文本"/>
		<script>
			$("button").click(function(){
				/* JQ操作DOM--html()函数使用 */
				$("p").html("<h1>JQ操作DOM-html函数使用</h1>");
			});
			/* 练习1：div 200px*200px 背景颜色:黑，鼠标滑过之后，
			下边内容修改：<h3>提示，修改为黄颜色 */
			/* 练习2：按钮  文本框     点击按钮，文本增加一行文本 */
			$("div").mouseenter(function(){
				$("h3").html("<h3>黄颜色</h3>");
			});
			/* 练习2：按钮   文本框    点击按钮， 文本框增加一行文本 */
			$("input[type='button']").click(function(){
			//	alert("jq选择器是否选中")
			$("input[type='text']").val("文本框内容修改~")
			});
			/* 利用JQ操作DOM (页面效果) ：1.元素内容操作 （3个函数）
			                            html()
										val()
										taxt()
			                            2.属性操作（4个函数）
										<p align="center">
										attr()
										removeAttr()
										<input checked>
										prop()
										removeProp
										3.样式类名操作（4个函数）
										元素样式操作(5个函数)
										.demo{属性：属性值...}
										addClass()
										removeClass()
										toggleClass()
										hasClass()
										4.元素样式操作(5个函数)
										css()
										语法：css("css属性""css属性值")
										位置操作
										插入和删除操作（7个函数）
										元素遍历操作（6个函数）
										JQ动画操作
										5.插入和删除修改操作(7个函数)
										append()和prepend()
										after()和before()
										remove()和emptty()
										replaceWith()
			 */
		</script>
	</body>
</html>